<template>
  <div class="OnlineUpload" ref="homePage">
    <div class="bj">
      <van-nav-bar title="在线投诉" left-arrow @click-left="onClickLeft" />
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div id="container"></div>
    <div class="upload">
      <div class="position">
        <van-cell-group>
          <van-field v-model="position" rows="2" placeholder="事发地(必填)" show-word-limit />
        </van-cell-group>
        <van-icon name="location" />
        <span @click="shifa" style="width: 20%;">当前位置</span>
      </div>
      <div class="position">
        <!-- <van-icon name="location" /> -->
        <van-cell-group>
          <van-field v-model="objectcomp" rows="2" maxlength="14" placeholder="投诉对象(必填)" show-word-limit />
        </van-cell-group>
        <van-icon name="arrow" />
      </div>
      <div class="content">
        <van-cell-group>
          <van-field v-model="content" maxlength="320" rows="2" autosize type="textarea" placeholder="请输入投诉原因(必填)" show-word-limit />
        </van-cell-group>
      </div>

      <div class="img">
        <p style="margin-bottom: 5px;">上传证据(最多6张)</p>
        <van-uploader :deletable="deletable" :after-read="afterRead" v-model="fileList" multiple :max-count="6" />
      </div>
      <div class="contact">
        <div class="contact_ren">
          <span>联系人 : </span>
          <van-cell-group>
            <van-field v-model="contact" placeholder="请留下联系人" />
          </van-cell-group>
        </div>
        <div class="contact_phone">
          <span>联系方式:</span>
          <van-cell-group>
            <van-field v-model="contactphone" maxlength="11" placeholder="您的电话我们会进行加密保护" />
          </van-cell-group>
        </div>
      </div>
    </div>
    <div @click="Message" class="release">提交</div>
  </div>
</template>

<script>
import {
  MessageBoardDo,
  uploadImg
} from '@/api/home.js'
export default {
  data () {
    return {
      clintHeigth: '', // 获取页面高度
      content: '', // 投诉内容
      position: '', // 定位
      fileList: [], // 上传的图片
      objectcomp: '', // 投诉对象
      contact: '', // 联系人
      contactphone: '', // 联系方式
      deletable: false,
      imgSN: []
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    // this.mapinit();
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    mapinit () { // 定位
      let that = this
      let map = new AMap.Map('container', {
        enableHighAccuracy: true,
        resizeEnable: true,
        center: [114.085947, 22.547],
        zoom: 8
      })
      // document.getElementById('adcode').innerHTML = '当前城市adcode：' + map.getAdcode() + '<br>' +
      //   '当前中心点：' + map.getCenter()
      // 获取用户所在城市信息
      function showCityInfo () {
        // 实例化城市查询类
        let citysearch = new AMap.CitySearch()
        // 自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          // console.log(result)
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
              // console.log(JSON.stringify(result));
              let cityinfo = result.city
              let citybounds = result.bounds
              that.position = cityinfo

              // document.getElementById('info').innerHTML = '您当前所在城市：' + cityinfo;
              // 地图显示当前城市
              map.setBounds(citybounds)
            }
          } else {
            // document.getElementById('info').innerHTML = result.info;
            // console.log(result)
          }
        })
      }
      showCityInfo()
    },

    afterRead (file) {
      // console.log(file.content);
      let data = {
        Type: 'base64',
        ModuleType: 1,
        ImgData: file.content
      }
      uploadImg(data).then(res => {
        console.log(res)
        this.imgSN.push(res.imgSN)
        console.log(this.imgSN)
      })
    },
    shifa () { // 点击获取定位
      this.mapinit()
    },
    Message () {
      let data = {
        DoType: 'Add',
        Type: 1,
        ForObject: this.objectcomp, // 投诉对象
        City: this.position, // 当前位置
        Content: this.content, // 投诉内容
        ImgSNS: this.imgSN, // 投诉照片
        Contacts: this.contact, // 投诉人
        ContactMobile: this.contactphone // 投诉人电话
      }
      if (this.position == '') {
        this.$toast('请输入当前位置')
      } else if (this.objectcomp == '') {
        this.$toast('请输入投诉对象')
      } else if (this.contact.length < 2) {
        this.$toast('请输入联系人')
      } else if (this.contactphone.length != 11) {
        this.$toast('请输入正确的联系人电话')
      } else if (this.content.length < 12) {
        this.$toast('请输入至少十二位数的内容')
      } else {
        // console.log(1)
        MessageBoardDo(data).then(res => {
          console.log(res)
          if (res.Code == 0) {
            this.$toast('已经提交成功，稍后会有工作人员来处理！')
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          } else {

          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.OnlineUpload {
  background: #ffffff;
  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .upload {
    background: #ffffff;
    margin-bottom: 10px;
    padding: 10px 0px 10px 0px;
    .content {
      width: 90%;
      height: 200px;
      margin: 10px auto;
      border: 1px solid #f0f0f0;
      // background: white;
      .van-cell-group {
        padding: 5px;
        height: 198px;
        overflow: hidden;
        .van-cell {
          padding: 0;
        }
      }
    }

    .position {
      display: flex;
      width: 90%;
      margin: 10px auto;
      height: 40px;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      .van-cell-group {
        width: 90%;
        height: 38px;
        display: flex;
        align-items: center;

        .van-cell {
          padding: 0;

          .van-field__control {
            border: none;
            background: none !important;
          }
        }
      }
    }
    .img {
      width: 90%;
      margin: 10px auto;
      .van-uploader {
        .van-uploader__wrapper {
          .van-uploader__preview {
            .van-icon {
              // display: none;
            }
          }
        }
      }
    }
    .contact {
      width: 100%;
      border-top: #f0f0f0 10px solid;
      background: white;
      .contact_ren {
        span {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          width: 20%;
        }
        .van-cell-group {
          width: 70%;
          .van-cell {
            padding: 10px 0px;
            input {
              border: 1px #f0f0f0 solid;
            }
          }
        }
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .contact_phone {
        span {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          width: 20%;
        }
        .van-cell-group {
          width: 70%;
          .van-cell {
            padding: 10px 0px;
            input {
              border: 1px #f0f0f0 solid;
            }
          }
        }
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .release {
    width: 80%;
    height: 40px;
    margin: 10px auto;
    // border-radius: 8px;
    background: #46d0ca;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    color: white;
    border-radius: 30px;
  }
}
</style>
